<template>
  <Row type="flex" :gutter="18">
    <Col :span="5" class = "Col1">
      <Menu theme="light" @on-select="handleRoute" :active-name="activeMenu">
        <img src="@oj/views/Softexam/logo.jpg" class="img1"/>
        <p class="p1">软件工程师考试</p>
        <hr class="hr1"/>
        <MenuItem name="/Softexam"><Icon type="ios-paper"></Icon>考试信息</MenuItem>
        <MenuItem name="/Softexam/Practice"><Icon type="ios-paper"></Icon>习题练习</MenuItem>
        <MenuItem name="/Softexam/imitate"><Icon type="ios-paper"></Icon>模拟考试</MenuItem>
        <div class="div1"></div>
      </Menu>
    </Col>
    <Col :span="5" class = "Col2">
        <Panel class = "panle1">
          <div slot="title">
            <h2 class="h2-1">软考-习题练习</h2>
            <h3 class="h3"></h3>
          </div>
                <div slot="extra">
                  <ul class="filter">
                    <li>
                      <Input
                        placeholder="keyword"
                        icon="ios-search-strong" style = "margin-top: 50px;"/>
                    </li>
                    <li>
                      <Button type="info" @click="onReset" style = "margin-top: 50px;">
                        <Icon type="refresh"></Icon>
                        刷新
                      </Button>
                    </li>
                  </ul>
                </div>
                <Table stripe :columns="columns1" :data="data1"></Table>
              </Panel>
              <Pagination></Pagination>
    </Col>
  </Row>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import Pagination from '@oj/components/Pagination'
  import CodeMirror from '@oj/components/CodeMirror.vue'

  export default {
    name: 'Softexamall',
    components: {
      Pagination
    },
    methods: {
      handleRoute (route) {
        this.$router.push(route)
      }
    },
    computed: {
      ...mapGetters(['website', 'modalStatus', 'user', 'isAuthenticated', 'isAdminRole']),
     // 跟随路由变化
      activeMenu () {
        return this.$route.path
      }
    },
    data () {
      return {
        columns1: [
          {
            title: '题目名称',
            key: 'name'
          },
          {
            title: '题目类型',
            key: 'age'
          },
          {
            title: '状态',
            key: 'address',
            width: 150,
            align: '',
            render: (h, params) => {
              let t = params.row.difficulty
              let color = 'blue'
              if (t === '完成') color = 'green'
              else if (t === '未完成') color = 'red'
              return h('Tag', {
                props: {
                  color: color
                }
              }, params.row.difficulty)
            }
          },
          {
            title: '完成日期',
            key: 'date'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: '',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.$router.push({name: 'homeworkDetail', params: {homeworkID: params.row.id}})
                    }
                  }
                }, '查看')
              ])
            }
          }
        ],
        data1: [
          {
            id: '1',
            name: 'Python 数据爬虫-1',
            age: 'Python',
            address: '未完成',
            date: '2019-10-08',
            difficulty: '未完成'
          }
        ]
      }
    }
  }
</script>
<style>
  .img1{
    width: 120px;
    height: 120px;
    margin-top: 60px;
    margin-left: 60px;
  }
  .p1{
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  .div1{
    height: 50px;
  }
  .div2{
    margin-left: 50px;
  }
  .div3{
    margin-left: 50px;
    width: 800px;
  }
  .hr1{
    margin-left: 20px;
    margin-bottom: 20px;
    width: 200px;
    color: #F8F8F9;
  }
  .hr2{
    margin-left: 50px;
    margin-bottom: 1px;
    width: 1100px;
    color: #F8F8F9;
  }
.Col1{
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 200px;
  margin-right: 0px;
}
.Col2{
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  left: -80px;
  width: 1200px;
  height: 1150px;
}
.panle1{
  width: 1200px;
  height: 1150px;
}
.h2-1{
  margin-top: 50px;
  margin-bottom: 0px;
  margin-left: 30px;
  margin-right: 50px;
  font-size: 20px;
  width: 180px;
}
.h3{
  margin-top: 0px;
  margin-bottom: 25px;
  margin-left: 100px;
  margin-right: 50px;
  font-size: 18px;
  width: 500px;
}
.h4{
  font-size: 16px;
  margin-top: 30px;
}
.h5{
  font-size: 16px;
  margin-top: 35px;
  margin-bottom: 10px;
}
.p2{
  width: 820px;
  font-size: 17px;
  margin-left: 30px;
}
.li1{
  margin-left: 120px;
  margin-top: 20px;
}
.a1{
  margin-left: 80px;
}
.table1{
  text-size: 18px;
  margin-bottom: 30px;
}
</style>
